.pub_square {
    background: url("@/static/aimg/img_68.png") top center no-repeat #f3f5f5;
    background-size: 100vw auto;

    .page_box {
        .tab_div {
            padding: 30rpx 36rpx 50rpx 36rpx;
            display: flex;

            .tab {
                // width: 25%;
                line-height: 40rpx;
                text-align: center;
                font-size: 32rpx;
                color: #ffffff;
                position: relative;
                margin: 0 54rpx 0 0;
            }

            .tab:last-child {
                margin: 0;
            }

            .tab_active {
                font-size: 32rpx;
                font-weight: bold;
                // background: linear-gradient(to right, #87DDFE, #4E89FE);
                // -webkit-background-clip: text;
                // color: transparent;
            }

            .tab_active::before {
                width: 52rpx;
                height: 8rpx;
                background: url("@/static/aimg/img_70.png") center no-repeat;
                background-size: 52rpx 8rpx;
                position: absolute;
                bottom: -24rpx;
                left: 50%;
                margin-left: -26rpx;
                content: "";
            }
        }

        .swiper_box {
            height: calc(100% - 120rpx);

            .swiper_box_item {
                height: 100%;
            }
        }
    }



    .add_user_alert_div {
        width: 100vw;
        height: 100vh;
        background-color: rgba($color: #000000, $alpha:0.6);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000001;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;

        .alert_box {
            width: calc(100% - 100rpx);
            margin: 0 50rpx 40rpx 50rpx;
            background: url("@/static/aimg/img_44.png") center no-repeat;
            background-size: 100% 120%;
            border-radius: 64rpx;
            padding: 60rpx 70rpx 40rpx 70rpx;

            .logo {
                width: 134rpx;
                height: 134rpx;
                margin: 0 auto;
                border-radius: 50%;
                overflow: hidden;
            }

            .title {
                color: #000000;
                font-size: 32rpx;
                font-weight: bold;
                text-align: center;
                line-height: 50rpx;
                margin: 20rpx 0 20rpx 0;
            }

            .spans {
                display: flex;
                height: 54rpx;
                justify-content: center;
                margin-bottom: 50rpx;

                .span_1 {
                    height: 54rpx;
                    width: 54rpx;
                    background: url("@/static/aimg/img_24.png") center no-repeat;
                    background-size: 50rpx;
                    margin: 0 14rpx 0 0;
                }

                .span_1_no {
                    background: url("@/static/aimg/img_43.png") center no-repeat;
                    background-size: 50rpx;
                }

                .span_2 {
                    height: 54rpx;
                    width: 54rpx;
                    background: url("@/static/aimg/img_23.png") top 10rpx center no-repeat;
                    background-size: 54rpx;
                    margin: 0 0 0 4rpx;
                }

                .span_3 {
                    width: 70rpx;
                    height: 42rpx;
                    line-height: 42rpx;
                    color: #CF943C;
                    font-size: 20rpx;
                    border-radius: 21rpx;
                    text-align: center;
                    margin: 10rpx 0 0 20rpx;
                    background-image: linear-gradient(to right, #FFE8C1, #FFDE76);
                }
            }

            .msg {
                color: #485774;
                font-size: 24rpx;
                line-height: 36rpx;
                margin: 40rpx 0 0 0;
                text-align: center;
            }

            .labels {
                display: flex;
                // justify-content: center;
                width: 100%;
                background-color: #fff;
                padding: 56rpx 16rpx;
                margin: 32rpx 0 50rpx 0;
                border-radius: 30rpx;
                overflow-x: scroll;

                .li {
                    width: 23%;
                    flex-shrink: 0;

                    .img {
                        width: 70rpx;
                        height: 70rpx;
                        margin: 0 auto;
                    }

                    .txt {
                        line-height: 36rpx;
                        color: #485774;
                        font-size: 20rpx;
                        text-align: center;
                        margin-top: 6rpx;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }

            .pub_btn {
                width: 70%;
                background-image: linear-gradient(to right, #FF9240, #FF0D09);
            }
        }

        .close {
            color: #fff;
            font-size: 60rpx;
        }
    }

    .contacts_alert_div {
        width: 100vw;
        height: 100vh;
        background-color: rgba($color: #000000, $alpha:0.6);
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 10000001;
        padding: 0 0 0 20vw;

        .alert_div {
            width: 100%;
            height: 100%;
            background-color: #fff;
            padding: 100rpx 0 60rpx 0;
            position: relative;
            left: 0;

            .alert_title {
                line-height: 100rpx;
                color: #485774;
                font-size: 32rpx;
                font-weight: bold;
                width: 100%;
                text-align: center;
                position: relative;

                .close {
                    position: absolute;
                    right: 20rpx;
                    top: 0;
                    font-size: 30rpx;
                }
            }

            .lis_box {
                height: calc(100% - 260rpx);
                margin-bottom: 40rpx;
                overflow-y: scroll;
                padding: 0 40rpx;

                .title {
                    line-height: 40rpx;
                    color: #485774;
                    font-size: 28rpx;
                    font-weight: bold;
                    margin-bottom: 28rpx;
                }

                .inputs {
                    width: 100%;
                    height: 80rpx;
                    background-color: #F4F6FA;
                    border-radius: 40rpx;
                    margin: 0 0 30rpx 0;
                    padding: 20rpx 30rpx;

                    .input {
                        height: 40rpx;
                        line-height: 40rpx;
                        font-size: 24rpx;
                        color: #485774;
                    }

                    .uni-input-placeholder {
                        color: #babdc2 !important;
                    }
                }

                .lis {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;

                    .li {
                        height: 74rpx;
                        background-color: #F4F6FA;
                        font-size: 24rpx;
                        color: #485774;
                        line-height: 74rpx;
                        width: calc((100% / 3) - 20rpx);
                        border-radius: 38rpx;
                        text-align: center;
                        margin: 0 20rpx 30rpx 0;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        padding: 0 20rpx;
                    }

                    .li_active {
                        background-image: linear-gradient(to right, #87DDFE, #4E89FE);
                        color: #fff;
                    }

                    .li:nth-child(3n) {
                        margin: 0 0 30rpx 0;
                    }
                }
            }

            .bottom_div {
                width: 100%;
                display: flex;
                justify-content: space-around;

                .pub_btn:nth-child(1) {
                    width: 35%;
                    background-image: linear-gradient(to right, #E7ECF5, #E7ECF5);
                    color: #485774;
                }

                .pub_btn:nth-child(2) {
                    width: 50%;
                }
            }
        }

        ::v-deep .alert_div_animation {
            animation: alert_div_animation 0.6s;
        }

        @keyframes alert_div_animation {
            from {
                left: 100vw;
            }

            to {
                left: 0;
            }
        }
    }

    .add_group_alert_div {
        width: 100vw;
        height: 100vh;
        background-color: rgba($color: #000000, $alpha:0.6);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000001;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;

        .alert_box {
            width: calc(100% - 100rpx);
            margin: 0 50rpx 40rpx 50rpx;
            background-color: #fff;
            // background: url("@/static/aimg/img_44.png") center no-repeat;
            // background-size: 100% 120%;
            border-radius: 64rpx;
            padding: 0 70rpx 40rpx 70rpx;

            .logo {
                width: 140rpx;
                height: 140rpx;
                margin: -70rpx auto 0 auto;
                border-radius: 50%;
                overflow: hidden;
                background-color: #fff;
            }

            .title {
                color: #000000;
                font-size: 48rpx;
                font-weight: bold;
                text-align: center;
                line-height: 70rpx;
                margin: 30rpx 0 50rpx 0;
            }

            .text {
                margin-top: 30rpx;
                display: flex;
                flex-wrap: wrap;

                .p_1 {
                    width: 100%;
                    color: #000000;
                    font-size: 28rpx;
                    line-height: 60rpx;
                }

                .p_2 {
                    width: 100%;
                    color: rgba($color: #000000, $alpha: 0.5);
                    font-size: 24rpx;
                    word-break: break-all;
                    line-height: 40rpx;
                    max-height: 200rpx;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 5;
                    -webkit-box-orient: vertical;
                    white-space: pre-wrap;
                }

                .p_3 {
                    width: 100%;
                    color: rgba($color: #000000, $alpha: 0.38);
                    font-size: 24rpx;
                    line-height: 40rpx;
                }
            }

            .pub_btn {
                width: 70%;
                background-image: linear-gradient(to right, #FF9240, #FF0D09);
            }
        }

        .close {
            color: #fff;
            font-size: 60rpx;
        }
    }
}

.square_components_ad_center {
    height: 100%;

    .lis_div {
        width: 100%;
        height: 100%;

        .lis_box {
            display: flex;
            flex-wrap: wrap;
            padding: 0 36rpx 0 36rpx;
        }

        .li {
            width: calc(50% - 10rpx);
            height: 370rpx;
            margin: 0 20rpx 20rpx 0;
            position: relative;
            border-radius: 8rpx;
            background-color: #F4F6F9;

            .img {
                width: 100%;
                height: 370rpx;
                border-radius: 8rpx;
                overflow: hidden;
            }

            .bottom {
                width: 100%;
                position: absolute;
                left: 0;
                bottom: 0;
                background-color: rgba(78, 137, 254, 0.4);
                height: 42rpx;
                border-bottom-left-radius: 8rpx;
                border-bottom-right-radius: 8rpx;
                text-align: right;
                font-size: 24rpx;
                color: #FFFFFF;
                padding: 0 16rpx;
                line-height: 42rpx;

                .icon {
                    width: 30rpx;
                    height: 22rpx;
                    display: inline-block;
                    vertical-align: top;
                    margin: 10rpx 8rpx 0 0;
                }
            }
        }

        .li:nth-child(2n) {
            margin: 0 0 20rpx 0;
        }
    }
}

.pub_ad_detail {
    .img {
        width: 100vw;
    }
}

.square_components_friends {
    height: 100%;

    .lis_div {
        width: 100%;
        height: 100%;

        .lis_box {
            padding: 10rpx 30rpx 0 30rpx;
        }

        .li {
            width: 100%;
            box-shadow: 0 0 12rpx 4rpx RGBA(131, 215, 254, 0.1);
            border-radius: 10rpx;
            padding: 30rpx;
            margin-bottom: 30rpx;
            background-color: #fff;


            .li_user {
                display: flex;
                margin-bottom: 34rpx;

                .headimg {
                    width: 90rpx;
                    height: 90rpx;
                    border-radius: 50%;
                    overflow: hidden;
                }

                .text {
                    flex: 1;
                    margin: 0 0 0 30rpx;
                    padding: 8rpx 0 0 0;

                    .name {
                        font-size: 28rpx;
                        color: #485774;
                        line-height: 40rpx;
                        height: 40rpx;

                        .span_2 {
                            width: 40rpx;
                            height: 40rpx;
                            background: url("@/static/aimg/img_24.png") center no-repeat;
                            background-size: 30rpx;
                            margin: 0 0 0 10rpx;
                            display: inline-block;
                            vertical-align: top;
                        }

                        .span_3 {
                            height: 30rpx;
                            padding: 0 14rpx;
                            border-radius: 15rpx;
                            line-height: 30rpx;
                            font-size: 20rpx;
                            margin: 6rpx 0 0 10rpx;
                            color: #D39C46;
                            background-image: linear-gradient(to right, #F6DF99, #FFDE75);
                            display: inline-block;
                            vertical-align: top;
                        }
                    }

                    .time {
                        color: #485774;
                        font-size: 22rpx;
                        line-height: 30rpx;
                        opacity: 0.6;
                        margin-top: 6rpx;
                    }
                }
            }

            .li_content {
                margin-bottom: 24rpx;
                line-height: 40rpx;
                font-size: 28rpx;
                color: #485774;
                word-break: break-all;
                white-space: pre-wrap;
                padding: 0 0 10rpx 0;
                -webkit-user-select: auto;
            }

            .li_imgs {
                margin-bottom: 10rpx;
                display: flex;
                flex-wrap: wrap;

                .img {
                    width: calc((100% - 28rpx) / 3);
                    padding: calc((100% - 28rpx) / 3) 0 0 0;
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    margin: 0 14rpx 14rpx 0;
                }

                .img:nth-child(3n) {
                    margin: 0 0 14rpx 0;
                }
            }

            .li_info {
                display: flex;
                justify-content: space-between;

                .more {
                    .txt {
                        display: inline-block;
                        vertical-align: top;
                        margin: 0 0 0 20rpx;
                        line-height: 40rpx;
                        color: #485774;
                        font-size: 24rpx;

                        .icon-font-basic {
                            font-size: 30rpx;
                            height: 40rpx;
                            display: inline-block;
                            vertical-align: top;
                            margin: 0 8rpx 0 0;
                        }

                        .icon-b-taoxin3 {
                            background: linear-gradient(45deg, #FF9240, #FF130B);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }
                    }
                }

                .time {
                    .icon {
                        background: linear-gradient(to left bottom, #FF9240, #FF130B);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }
                }
            }
        }

        .li:last-child {
            border-bottom: none;
        }
    }

    .post_btn {
        position: fixed;
        bottom: 150rpx;
        right: 30rpx;
        z-index: 10;


        .icon {
            background-color: #fff;
            width: 94rpx;
            height: 94rpx;
            border-radius: 50%;
            display: block;
            margin: 0 auto 0 auto;
            box-shadow: 0 0 12rpx 4rpx rgba(239, 99, 255, 0.4);

            .icon-b-as-5 {
                font-size: 94rpx;
                width: 94rpx;
                height: 94rpx;
                background: linear-gradient(#EF63FF, #AD85FF);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

        .txt {
            line-height: 44rpx;
            color: #9D73C5;
            font-size: 32rpx;
            font-weight: bold;
            text-align: center;
            margin-top: 10rpx;
        }
    }
}

.pub_friends_post {
    .page_box {
        padding: 40rpx 50rpx 0 50rpx;

        .textarea {
            width: 100%;
            line-height: 40rpx;
            font-size: 28rpx;
            height: 200rpx;
        }

        ::placeholder {
            color: #C4C6CB;
        }

        .img_div {
            width: 100%;
            display: flex;
            flex-wrap: wrap;

            .li {
                width: calc((100% - 28rpx) / 3);
                padding: calc((100% - 28rpx) / 3) 0 0 0;
                margin: 0 14rpx 14rpx 0;
                position: relative;

                .img {
                    width: 100%;
                    height: 100%;
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    position: absolute;
                    top: 0;
                    left: 0;
                }

                .icon-font-basic {
                    font-size: 30rpx;
                    position: absolute;
                    top: 10rpx;
                    right: 10rpx;
                    color: #333;
                    width: 30rpx;
                    height: 30rpx;
                }

                .icon-font-basic::before {
                    z-index: 1;
                    position: absolute;
                    top: 0;
                    left: 0;
                }

                .icon-font-basic::after {
                    width: 20rpx;
                    height: 20rpx;
                    background-color: #fff;
                    border-radius: 50%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin: -10rpx 0 0 -10rpx;
                    content: "";
                }
            }

            .li:nth-child(3n) {
                margin: 0 0 14rpx 0;
            }

            .li_add {
                background-color: #F4F6F9;

                .icon-font-basic {
                    font-size: 60rpx;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin: -30rpx 0 0 -30rpx;
                    color: #D0D7E2;
                }
            }
        }

        .bottom_div {
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: #fff;
            padding: 60rpx 10vw;

            .txt {
                line-height: 40rpx;
                font-size: 24rpx;
                color: #484B5B;
                text-align: center;

                .icon-font-basic {
                    font-size: 24rpx;
                    margin: 0 10rpx 0 0;
                }
            }

            .pub_btn {
                margin-top: 30rpx;
            }
        }
    }
}

.square_components_friends_comments {
    width: 100vw;
    height: 100vh;
    background-color: rgba($color: #000000, $alpha:0.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000000;

    .comments_box {
        width: 100vw;
        height: calc(70vh + 200rpx);
        background-color: #fff;
        position: absolute;
        left: 0;
        bottom: 0;

        .comments_title {
            width: 100%;
            line-height: 80rpx;
            text-align: center;
            color: #333;
            font-size: 24rpx;
            position: relative;
            background-color: #fff;
            font-weight: bold;

            .icon-font-basic {
                font-size: 26rpx;
                position: absolute;
                right: 30rpx;
                top: 0;
            }
        }

        .lis_div {
            width: 100vw;
            height: 70vh;

            .li {
                width: calc(100% - 60rpx);
                position: relative;
                padding: 0 0 0 100rpx;
                margin: 0 auto 30rpx auto;

                .headimg {
                    width: 70rpx;
                    height: 70rpx;
                    position: absolute;
                    left: 0;
                    top: 0;
                    border-radius: 50%;
                    overflow: hidden;
                }

                .text {
                    .name {
                        line-height: 30rpx;
                        color: #485774;
                        font-size: 24rpx;
                        opacity: 0.5;

                        .icon-font-basic {
                            font-size: 12rpx;
                            display: inline-block;
                            vertical-align: top;
                            margin: 0 10rpx;
                        }
                    }

                    .content {
                        line-height: 40rpx;
                        color: #485774;
                        font-size: 28rpx;
                        word-break: break-all;
                        white-space: pre-wrap;
                        margin: 10rpx 0;
                    }

                    .info {
                        .time {
                            line-height: 30rpx;
                            color: #485774;
                            font-size: 24rpx;
                            opacity: 0.5;
                            display: inline-block;
                            vertical-align: top;
                            margin: 0 20rpx 0 0;
                        }

                        .txt {
                            line-height: 30rpx;
                            color: #485774;
                            font-size: 24rpx;
                            opacity: 0.9;
                            // display: inline-block;
                            // vertical-align: top;
                            // margin: 0 20rpx 0 0;
                            float: right;
                        }

                        .right {
                            float: right;
                            line-height: 30rpx;
                            color: #485774;
                            font-size: 24rpx;

                            .icon-font-basic {
                                font-size: 30rpx;
                                display: inline-block;
                                vertical-align: top;
                                margin: 0 8rpx 0 0;
                            }
                        }
                    }

                    .more {
                        line-height: 30rpx;
                        color: #485774;
                        font-size: 24rpx;
                        opacity: 0.8;
                        padding: 0 0 20rpx 0;

                        .icon-font-basic {
                            font-size: 20rpx;
                            display: inline-block;
                            vertical-align: top;
                            margin: 0 0 0 8rpx;
                        }
                    }

                    .child_div {
                        padding: 30rpx 0 0 0;

                        .li {
                            width: 100%;
                            padding: 0 0 0 44rpx;
                            margin: 0 0 20rpx 0;

                            .headimg {
                                width: 30rpx;
                                height: 30rpx;
                            }
                        }
                    }
                }
            }
        }

        .input_div {
            width: 100%;
            height: 120rpx;
            padding: 15rpx 20rpx;
            background-color: #fff;
            display: flex;
            box-shadow: 0 0 12rpx 4rpx RGBA(131, 215, 254, 0.1);

            .input {
                flex: 1;
                height: 90rpx;
                line-height: 40rpx;
                background-color: #f8f8f8;
                border-radius: 10rpx;
                padding: 15rpx 20rpx;
                font-size: 26rpx;
                color: #333;
            }

            .btn {
                width: 100rpx;
                height: 90rpx;
                line-height: 90rpx;
                text-align: center;
                font-size: 26rpx;
                font-weight: bold;
            }
        }
    }

    ::v-deep .comments_box_animation {
        animation: comments_box_animation 0.4s;
    }

    @keyframes comments_box_animation {
        from {
            bottom: -70vh;
        }

        to {
            bottom: 0;
        }
    }
}

.square_components_contacts {
    height: 100%;

    .tabs_div {
        height: 80rpx;
        display: flex;
        justify-content: space-around;
        border-bottom: 8rpx solid #F4F6FA;
        box-sizing: border-box;

        .tab {
            font-size: 24rpx;
            color: #485774;
            line-height: 50rpx;
            height: 50rpx;

            .icon-font-basic {
                font-size: 14rpx;
                margin: 0 0 0 10rpx;
                color: #4E89FE;
                display: inline-block;
                vertical-align: top;
                // background: linear-gradient(#EF63FF, #AD85FF);
                // -webkit-background-clip: text;
                // -webkit-text-fill-color: transparent;
            }
        }
    }

    .lis_div {
        width: 100%;
        // height: calc(100% - 80rpx);
        height: 100%;

        .lis_box {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            padding: 18rpx 18rpx 0 18rpx;

            .li {
                width: calc((100% / 3) - 10rpx);
                margin: 0 12rpx 20rpx 0;
                border-radius: 16rpx;
                background-color: #fff;
                padding: 20rpx;

                .name {
                    line-height: 40rpx;
                    font-size: 24rpx;
                    color: #333;
                    font-weight: bold;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    text-align: center;

                    .xin {
                        width: 30rpx;
                        line-height: 30rpx;
                        height: 30rpx;
                        background-color: #FF130B;
                        color: #fff;
                        border-radius: 50%;
                        display: inline-block;
                        vertical-align: top;
                        margin: 5rpx 5rpx;
                        font-size: 18rpx;
                        text-align: center;
                    }
                }

                .img {
                    width: 90rpx;
                    height: 90rpx;
                    margin: 16rpx auto;
                    position: relative;

                    .headimg {
                        width: 90rpx;
                        height: 90rpx;
                        border-radius: 50%;
                        overflow: hidden;
                    }

                    .span {
                        width: 60rpx;
                        height: 28rpx;
                        line-height: 28rpx;
                        font-size: 16rpx;
                        text-align: center;
                        background-color: #1F7CFF;
                        color: #fff;
                        position: absolute;
                        left: 50%;
                        margin-left: -30rpx;
                        bottom: 0;
                        border-radius: 14rpx;
                    }
                }

                .btn {
                    width: 80%;
                    height: 60rpx;
                    line-height: 60rpx;
                    border-radius: 30rpx;
                    color: #fff;
                    background-image: linear-gradient(to right, #9C8BFC, #806EF9);
                    margin: 0 auto 16rpx auto;
                    text-align: center;
                    font-size: 24rpx;
                }

                .txt {
                    line-height: 40rpx;
                    font-size: 24rpx;
                    color: #606DF8;
                    text-align: center;
                }
            }

            .li:nth-child(3n) {
                margin: 0 0 20rpx 0;
            }
        }
    }
}

.square_components_chat_group {
    height: 100%;

    .lis_div {
        height: 100%;
    }

    .search_div {
        width: calc(100% - 64rpx);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;

        .search {
            background-color: #fff;
            height: 80rpx;
            border-radius: 40rpx;
            width: calc(100% - 100rpx);
            display: flex;
            justify-content: space-between;
            padding: 10rpx 20rpx;

            .input {
                width: calc(100% - 80rpx);
                height: 60rpx;
                line-height: 60rpx;
                color: #333;
                font-size: 28rpx;
                padding: 0 20rpx;
            }

            .icon {
                width: 80rpx;
                height: 60rpx;
                background: url("@/static/aimg/img_93.png") center no-repeat;
                background-size: 34rpx;
            }
        }

        .btn {
            height: 80rpx;
            line-height: 80rpx;
            color: #fff;
            font-size: 36rpx;
        }
    }

    .banner_div {
        width: calc(100vw - 64rpx);
        border-radius: 10rpx;
        margin: 40rpx auto 0 auto;

        .swiper {
            width: calc(100vw - 64rpx);
            height: 290rpx;
            border-radius: 10rpx;
            overflow: hidden;
        }

        .swiper_item {
            width: calc(100vw - 64rpx);
            height: 290rpx;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 10rpx;
        }

        ::v-deep uni-swiper .uni-swiper-dot {
            background-color: #fff;
            opacity: 0.6;
        }

        ::v-deep uni-swiper .uni-swiper-dot-active {
            background-color: #fff;
            opacity: 1;
        }
    }

    .gtabs_div {
        width: calc(100vw - 64rpx);
        border-radius: 10rpx;
        margin: 40rpx auto 0 auto;
        height: 80rpx;
        white-space: nowrap;

        .tab {
            line-height: 80rpx;
            height: 80rpx;
            color: #fff;
            font-size: 32rpx;
            display: inline-block;
            border-bottom: 4rpx solid rgba($color: #000000, $alpha: 0);
            margin: 0 60rpx 0 0;
        }
        .tab:last-child{
            margin: 0;
        }

        .tab_active {
            color: #fff;
            font-weight: bold;
            border-bottom: 6rpx solid #fff;
        }
    }

    .lis_box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 30rpx 18rpx 0 18rpx;

        .li {
            width: calc((100% / 3) - 10rpx);
            margin: 0 12rpx 20rpx 0;
            border-radius: 16rpx;
            background-color: #fff;
            padding: 20rpx;

            .name {
                line-height: 40rpx;
                font-size: 24rpx;
                color: #333;
                font-weight: bold;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: center;
            }

            .img {
                width: 90rpx;
                height: 90rpx;
                margin: 16rpx auto;
                position: relative;
                border-radius: 16rpx;
                overflow: hidden;
            }

            .txt {
                line-height: 28rpx;
                font-size: 20rpx;
                color: rgba($color: #000000, $alpha: 0).37;
                text-align: center;
            }
        }

        .li:nth-child(3n) {
            margin: 0 0 20rpx 0;
        }
    }
}

.pub_mine_friend {
    height: 100vh;
    // background-color: #f8f8f8;

    .lis_div {
        height: calc(100vh - 100rpx - var(--status-bar-height));
    }
}


.pub_mine_friend_center {
    height: 100vh;
    // background-color: #f8f8f8;

    ::v-deep .h_right {
        background-image: linear-gradient(to right, #9C8BFC, #806EF9);
        border-radius: 20rpx;
    }

    .lis_div {
        height: calc(100vh - 100rpx - var(--status-bar-height));
    }

    .lis_box_title {
        line-height: 40rpx;
        color: #485774;
        font-size: 28rpx;
        text-align: center;
        font-weight: bold;
        margin: 30rpx 0 24rpx 0;
    }

    .user_div {

        .headimg {
            width: 150rpx;
            height: 150rpx;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto;
        }

        .name {
            height: 54rpx;
            display: flex;
            margin: 20rpx 0;
            justify-content: center;

            .span {
                line-height: 44rpx;
                color: #000000;
                font-size: 32rpx;
                font-weight: bold;
                padding: 10rpx 0 0 0;
            }

            .span_2 {
                height: 44rpx;
                width: 44rpx;
                background: url("@/static/aimg/img_23.png") center no-repeat;
                background-size: 44rpx;
                margin: 10rpx 0 0 4rpx;
            }

            .span_3 {
                width: 70rpx;
                height: 34rpx;
                line-height: 34rpx;
                color: #CF943C;
                font-size: 20rpx;
                border-radius: 17rpx;
                text-align: center;
                margin: 16rpx 0 0 20rpx;
                background-image: linear-gradient(to right, #FFE8C1, #FFDE76);
            }
        }

        .labels {
            display: flex;
            flex-wrap: wrap;
            width: calc(100% - 40rpx);
            margin: 0 auto;
            background: url("@/static/aimg/img_65.png") center no-repeat;
            background-size: 100% 100%;
            padding: 28rpx 28rpx 0 28rpx;

            .lix {
                width: calc(100% / 7);
                margin-bottom: 28rpx;

                .img {
                    width: 52rpx;
                    height: 52rpx;
                    margin: 0 auto;
                }

                .txt {
                    line-height: 28rpx;
                    color: #485774;
                    font-size: 20rpx;
                    text-align: center;
                }
            }
        }
    }
}